<!DOCTYPE HTML
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>武汉旅游通</title>
    <!-- <script src="../../libs/ol/ol.js" type="text/javascript"></script>-->
    <link href="ol.css" rel="stylesheet" type="text/css" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="icon.css" />
    <link href="ligerui-all.css" rel="stylesheet" type="text/css" />
    <link href="ligerui-grid.css" rel="stylesheet" type="text/css" />
    <!--script src="ol.js" type="text/javascript"></script-->
    <script src="ol-debug.js" type="text/javascript"></script>
    <script src="jquery-1.11.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="base.js"></script>
    <script src="zondyClient.js" type="text/javascript"></script>
    <!--引入操作JSON对象的相关脚本库-->
    <script src="ligerGrid.js" type="text/javascript"></script>
    <script src="json2.js" type="text/javascript"></script>
    <script src="jsonExtend.js" type="text/javascript"></script>
    <style type="text/css">
        body,
        html,
        div,
        ul,
        li,
        iframe,
        p,
        img {
            border: none;
            padding: 0;
            margin: 0;
            font-size: 16px;
            font-family: "微软雅黑";
        }

        #mapCon {
            width: 100%;
            height: 95%;
            position: absolute;
        }

        /* 图层控件层样式设置 */
        .layerControl {
            position: absolute;
            bottom: 5px;
            min-width: 200px;
            max-height: 1000px;
            right: 0px;
            top: 5px;
            /*在地图容器中的层，要设置z-index的值让其显示在地图上层*/
            z-index: 2001;
            color: #ffffff;
            background-color: #4c4e5a;
            /*边缘的宽度*/
            border-width: 10px;
            /*圆角的大小 */
            border-radius: 10px;
            /*边框颜色*/
            border-color: #000 #000 #000 #000;
        }

        .layerControl .title {
            font-weight: bold;
            font-size: 15px;
            margin: 10px;
        }

        .layerTree li {
            list-style: none;
            margin: 5px 10px;
        }

        /* 缩放滑块控件ZoomSlider的样式，放置到缩放按钮之间实现导航条功能*/
        #mapCon .ol-zoom .ol-zoom-out {
            margin-top: 204px;
        }

        #mapCon .ol-zoomslider {
            background-color: transparent;
            top: 2.3em;
        }

        #mapCon .ol-touch .ol-zoom .ol-zoom-out {
            margin-top: 212px;
        }

        #mapCon .ol-touch .ol-zoomslider {
            top: 2.75em;
        }

        #mapCon .ol-zoom-in .ol.has-tooltip:hover[role=tooltip],
        #mapCon .ol-zoom-in .ol-has-tooltip:focus[role=tooltip] {
            top: 3px;
        }

        #mapCon .ol-zoom-out .ol-has-tooltip:hover[role=tooltip],
        #mapCon .ol-zoon-out .ol-has-out-tooltip:focus[role=tooltip] {
            top: 232px;
        }

        #mapCon .ol-zoom-extent {
            top: 280px;
        }

        /* 鼠标位置控件层样式设置 */
        #mouse-position {
            float: left;
            position: absolute;
            bottom: 5px;
            width: 200px;
            height: 20px;
            /*在地图容器中的层，要设置z-index的值让其显示在地图上层*/
            z-index: 2000;
        }

        /* 鼠标位置信息自定义样式设置 */
        .custom-mouse-position {
            color: rgb(0, 0, 0);
            font-size: 16px;
            font-family: "微软雅黑";
        }

        #menu {
            float: left;
            position: absolute;
            bottom: 10px;
            z-index: 2000;
        }

        .tooltip-inner {
            white-space: nowrap;
        }

        .checkbox {
            left: 20px;
        }

        /**
        * 提示框的样式信息
        */
        .tooltip {
            position: relative;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 4px;
            color: white;
            padding: 4px 8px;
            opacity: 0.7;
            white-space: nowrap;
        }

        .tooltip-measure {
            opacity: 1;
            font-weight: bold;
        }

        .tooltip-static {
            background-color: #ffcc33;
            color: black;
            border: 1px solid white;
        }

        .tooltip-measure:before,
        .tooltip-static:before {
            border-top: 6px solid rgba(0, 0, 0, 0.5);
            border-right: 6px solid transparent;
            border-left: 6px solid transparent;
            content: "";
            position: absolute;
            bottom: -6px;
            margin-left: -7px;
            left: 50%;
        }

        .tooltip-static:before {
            border-top-color: #ffcc33;
        }
    </style>
</head>

<body>
    <div class="ToolLib">
        <input type="button" class="ButtonLib" id="zoom-out" value="单击缩小" />
        <input type="button" class="ButtonLib" id="zoom-in" value="单击放大" />
        <input type="button" class="ButtonLib" id="panto" value="平移到【武汉】" />
        <input type="button" class="ButtonLib" id="restore" value="复位" />
        <input type="button" class="ButtonLib" value="拉框查询" onclick="queryVectorLayerByPnt()" />
        <input type="button" class="ButtonLib" value="停止拉框查询" onclick="stopqueryVectorLayerByPnt()" />
        <input type="button" class="ButtonLib" value="点击查询" onclick="queryVectorLayerByPnt_Point()" />
        <input type="button" class="ButtonLib" value="停止点击查询" onclick="stopqueryVectorLayerByPnt()" />
        <input type="button" class="ButtonLib" value="测量" onclick="measure0()" />
        <input type="button" class="ButtonLib" value="停止测量" onclick="NOmeasure0()" />
    </div>
    <div id="mapCon">
        <div id="mouse-position"></div>
        <div id="layerControl" class="layerControl">
            <div class="title"><label>图层列表</label></div>
            <ul id="layerTree" class="layerTree"></ul>
        </div>
    </div>
    <div id="menu" class="menuCon">
        <label>Geometry type &nbsp;</label>
        <select id="type">
            <option value="length">Length</option>
            <option value="area">Area</option>
        </select>
        <label class="checkbox"><input type="checkbox" id="geodesic" />use geodesic measures</label>
        <div class="title" align="center">
            <label>查询图层</label>
        </div>
        <ul id="menuTree" class="menuTree">
            <select id="function_input" style="margin: 10px;" onchange="fun_select()">
                <option value="option0">行政区</option>
                <option value="option1">城市水系</option>
                <option value="option2">城市植被</option>
                <option value="option3">居民地域</option>
                <option value="option4">城市中心线</option>
                <option value="option5">餐饮娱乐</option>
                <option value="option6">公共场所</option>
                <option value="option7">金融机构</option>
                <option value="option8">居民小区</option>
                <option value="option9">联通营业厅</option>
                <option value="option10">旅游景点</option>
                <option value="option11">汽车服务</option>
                <option value="option12">商业网点</option>
                <option value="option13">文化教育</option>
                <option value="option14">新闻媒体</option>
                <option value="option15">医疗卫生</option>
                <option value="option16">邮电通讯</option>
                <option value="option17">政府机关</option>
            </select>
        </ul>
    </div>
    <div id="tab" class="tab"></div>
    <div id="clear" class="clear"> </div>
    <h1> </h1>
    <script type="text/javascript">
        var vectorMapdoc, draw, geometryFunction, selectWUHAN;
        //地图范围
        var extent = [114.12560222991377, 30.454247000021926, 114.50070698837158, 30.708513487957926];
        //中心点
        var center = ol.extent.getCenter(extent);
        //map中的图层数组
        var layer = new Array();
        //图层名称数组
        var layerName = new Array();
        //图层可见属性数组
        var layerVisibility = new Array();

        /**
        * 加载图层列表数据
        * @param {ol.Map} map 地图对象
        * @param {string} id 图层列表容器ID
        */
        function loadLayersControl(map, id) {
            //图层目录容器
            var treeContent = document.getElementById(id);
            //获取地图中所有图层
            var layers = map.getLayers();
            for (var i = 0; i < layers.getLength(); i++) {
                //获取每个图层的名称、是否可见属性
                layer[i] = layers.item(i);
                layerName[i] = layer[i].get('name');
                layerVisibility[i] = layer[i].getVisible();

                //新增li元素，用来承载图层项
                var elementLi = document.createElement('li');
                // 添加子节点
                treeContent.appendChild(elementLi);
                //创建复选框元素
                var elementInput = document.createElement('input');
                elementInput.type = "checkbox";
                elementInput.name = "layers";
                elementLi.appendChild(elementInput);
                //创建label元素
                var elementLable = document.createElement('label');
                elementLable.className = "layer";
                //设置图层名称
                setInnerText(elementLable, layerName[i]);
                elementLi.appendChild(elementLable);

                //设置图层默认显示状态
                if (layerVisibility[i]) {
                    elementInput.checked = true;
                }
                //为checkbox添加变更事件
                addChangeEvent(elementInput, layer[i]);

                //添加图层的透明度控制
                var elementInputOpacity = document.createElement("INPUT");
                elementInputOpacity.setAttribute("type", "range");
                elementInputOpacity.min = 0;
                elementInputOpacity.max = 1;
                elementInputOpacity.step = 0.01;
                elementLi.appendChild(elementInputOpacity);
                //为透明度控制添加绑定事件
                addChangeOpacityEvent(elementInputOpacity, layer[i]);

            }
        }

        /**
        * range元素的绑定事件
        * @param{input} element range元素
        * @param{ol.map.Layer} layer 图层对象
        */
        function addChangeOpacityEvent(element, layer) {
            element.oninput = function () {
                layer.setOpacity(parseFloat(element.value));

            }

        }
        /**
        * 为checkbox元素绑定变更事件
        * @param {input} element checkbox元素
        * @param {ol.layer.Layer} layer 图层对象
        */
        function addChangeEvent(element, layer) {
            element.onclick = function () {
                if (element.checked) {
                    //显示图层
                    layer.setVisible(true);
                }
                else {
                    //不显示图层
                    layer.setVisible(false);
                }
            };
        }
        /**
        * 动态设置元素文本内容（兼容）
        */
        function setInnerText(element, text) {
            if (typeof element.textContent == "string") {
                element.textContent = text;
            } else {
                element.innerText = text;
            }
        }
        //实例化鼠标位置控件（MousePosition）
        var mousePositionControl = new ol.control.MousePosition({
            //坐标格式
            coordinateFormat: ol.coordinate.createStringXY(4),
            //地图投影坐标系（若未设置则输出为默认投影坐标系下的坐标）
            //projection: 'EPSG:4326',
            //坐标信息显示样式类名，默认是'ol-mouse-position'
            className: 'custom-mouse-position',
            //显示鼠标位置信息的目标容器
            target: document.getElementById('mouse-position'),
            //未定义坐标的标记
            undefinedHTML: '&nbsp;'
        });
        var WUHAN_Layer = new Zondy.Map.Doc("WUHAN", "WUHAN", {
            ip: "localhost",
            port: "6163",
            isBaseLayer: true
        });
        var TiandiMap_vec = new ol.layer.Tile({
            name: "天地图矢量图层",
            source: new ol.source.XYZ({
                url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e7aa32db2e826fe71873ce8d58d0d1a2",
                wrapX: false
            })
        });
        var Tianditu_cva = new ol.layer.Tile({
            name: "天地图矢量注记图层",
            source: new ol.source.XYZ({
                url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e7aa32db2e826fe71873ce8d58d0d1a2",
                wrapX: false
            })
        });
        var TiandiMap_img = new ol.layer.Tile({
            name: "天地图影像图层",
            source: new ol.source.XYZ({
                url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e7aa32db2e826fe71873ce8d58d0d1a2",
                wrapX: false
            })
        });
        var TiandiMap_cia = new ol.layer.Tile({
            name: "天地图影像注记图层",
            source: new ol.source.XYZ({
                url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=e7aa32db2e826fe71873ce8d58d0d1a2",
                wrapX: false
            })
        });
        //实例化比例尺控件（ScaleLine）
        var scaleLineControl = new ol.control.ScaleLine({
            //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
            units: "metric"
        });

        //实例化Map对象加载地图
        var map = new ol.Map({
            //地图容器div的ID
            target: 'mapCon',
            //地图容器中加载的图层
            layers: [WUHAN_Layer, TiandiMap_vec, Tianditu_cva, TiandiMap_img, TiandiMap_cia],
            //地图视图设置
            view: new ol.View({
                //地图初始中心点
                center: center,
                //地图初始显示级别
                zoom: 2,
                projection: "EPSG:4326",
                //最小级别
                minZoom: 10,
                //最大级别
                maxZoom: 20
            }),
            //加载控件到地图容器中
            controls: ol.control.defaults({//地图中默认控件
                /* @type {ol.control.Attribution} */
                attributionOptions: ({
                    //地图数据源信息控件是否可收缩,默认为true
                    collapsible: true
                })
            }).extend([mousePositionControl]),//加载鼠标位置控件
            //加载比例尺控件
            controls: ol.control.defaults().extend([scaleLineControl]),
        });

        //图层显示名称
        var name1 = "行政区";
        //要显示的图层的gdbps地址
        var gdbps1 = ["gdbp://MapGisLocal/平台基础示例数据/ds/武汉市区/sfcls/行政区"];
        //创建一个图层
        Governement_VecLayer = new Zondy.Map.Layer(name1, gdbps1, {
            name: "行政区",
            //访问IGServer的IP
            ip: "127.0.0.1",
            //访问IGServer的端口号，.net版为6163，Java版为8089
            port: "6163",
            //过滤条件
            filters: "2:GISLINKID=1742"
        });
        map.addLayer(Governement_VecLayer);
        var name2 = "城市水系";
        //要显示的图层的gdbps地址
        var gdbps2 = ["gdbp://MapGisLocal/平台基础示例数据/ds/武汉市区/sfcls/城市水系"];
        //创建一个图层
        Water_VecLayer = new Zondy.Map.Layer(name2, gdbps2, {
            name: "城市水系",
            //访问IGServer的IP
            ip: "127.0.0.1",
            //访问IGServer的端口号，.net版为6163，Java版为8089
            port: "6163",
            //过滤条件
            filters: "2:GISLINKID=1742"
        });
        map.addLayer(Water_VecLayer);
        var name3 = "城市植被";
        //要显示的图层的gdbps地址
        var gdbps3 = ["gdbp://MapGisLocal/平台基础示例数据/ds/武汉市区/sfcls/城市植被"];
        //创建一个图层
        Plant_VecLayer = new Zondy.Map.Layer(name3, gdbps3, {
            name: "城市植被",
            //访问IGServer的IP
            ip: "127.0.0.1",
            //访问IGServer的端口号，.net版为6163，Java版为8089
            port: "6163",
            //过滤条件
            filters: "2:GISLINKID=1742"
        });
        map.addLayer(Plant_VecLayer);
        var name4 = "居民地域";
        //要显示的图层的gdbps地址
        var gdbps4 = ["gdbp://MapGisLocal/平台基础示例数据/ds/武汉市区/sfcls/居民地域"];
        //创建一个图层
        Homeland_VecLayer = new Zondy.Map.Layer(name4, gdbps4, {
            name: "居民地域",
            //访问IGServer的IP
            ip: "127.0.0.1",
            //访问IGServer的端口号，.net版为6163，Java版为8089
            port: "6163",
            //过滤条件
            filters: "2:GISLINKID=1742"
        });
        map.addLayer(Homeland_VecLayer);
        var name5 = "城市中心线";
        //要显示的图层的gdbps地址
        var gdbps5 = ["gdbp://MapGisLocal/平台基础示例数据/ds/武汉市区/sfcls/城市中心线"];
        //创建一个图层
        Cityline_VecLayer = new Zondy.Map.Layer(name5, gdbps5, {
            name: "城市中心线",
            //访问IGServer的IP
            ip: "127.0.0.1",
            //访问IGServer的端口号，.net版为6163，Java版为8089
            port: "6163",
            //过滤条件
            filters: "2:GISLINKID=1742"
        });
        map.addLayer(Cityline_VecLayer);
        var name6 = "餐饮娱乐";
        //要显示的图层的gdbps地址
        var gdbps6 = ["gdbp://MapGisLocal/平台基础示例数据/ds/武汉市区/sfcls/餐饮娱乐"],
            //创建一个图层
            Entertament_VecLayer = new Zondy.Map.Layer(name6, gdbps6, {
                name: "餐饮娱乐",
                //访问IGServer的IP
                ip: "127.0.0.1",
                //访问IGServer的端口号，.net版为6163，Java版为8089
                port: "6163",
                //过滤条件
                filters: "2:GISLINKID=1742"
            });
        map.addLayer(Entertament_VecLayer);
        var name7 = "公共场所";
        //要显示的图层的gdbps地址
        var gdbps7 = ["gdbp://MapGisLocal/平台基础示例数据/ds/武汉市区/sfcls/公共场所"],
            //创建一个图层
            Public_VecLayer = new Zondy.Map.Layer(name7, gdbps7, {
                name: "公共场所",
                //访问IGServer的IP
                ip: "127.0.0.1",
                //访问IGServer的端口号，.net版为6163，Java版为8089
                port: "6163",
                //过滤条件
                filters: "2:GISLINKID=1742"
            });
        map.addLayer(Public_VecLayer);
        var name8 = "金融机构";
        //要显示的图层的gdbps地址
        var gdbps8 = ["gdbp://MapGisLocal/平台基础示例数据/ds/武汉市区/sfcls/金融机构"],
            //创建一个图层
            Bank_VecLayer = new Zondy.Map.Layer(name8, gdbps8, {
                name: "金融机构",
                //访问IGServer的IP
                ip: "127.0.0.1",
                //访问IGServer的端口号，.net版为6163，Java版为8089
                port: "6163",
                //过滤条件
                filters: "2:GISLINKID=1742"
            });
        map.addLayer(Bank_VecLayer);
        var name9 = "居民小区";
        //要显示的图层的gdbps地址
        var gdbps9 = ["gdbp://MapGisLocal/平台基础示例数据/ds/武汉市区/sfcls/居民小区"],
            //创建一个图层
            Home_VecLayer = new Zondy.Map.Layer(name9, gdbps9, {
                name: "居民小区",
                //访问IGServer的IP
                ip: "127.0.0.1",
                //访问IGServer的端口号，.net版为6163，Java版为8089
                port: "6163",
                //过滤条件
                filters: "2:GISLINKID=1742"
            });
        map.addLayer(Home_VecLayer);
        var name10 = "联通营业厅";
        //要显示的图层的gdbps地址
        var gdbps10 = ["gdbp://MapGisLocal/平台基础示例数据/ds/武汉市区/sfcls/联通营业厅"],
            //创建一个图层
            Liantong_VecLayer = new Zondy.Map.Layer(name10, gdbps10, {
                name: "联通营业厅",
                //访问IGServer的IP
                ip: "127.0.0.1",
                //访问IGServer的端口号，.net版为6163，Java版为8089
                port: "6163",
                //过滤条件
                filters: "2:GISLINKID=1742"
            });
        map.addLayer(Liantong_VecLayer);
        var name11 = "旅游景点";
        //要显示的图层的gdbps地址
        var gdbps11 = ["gdbp://MapGisLocal/平台基础示例数据/ds/武汉市区/sfcls/旅游景点"],
            //创建一个图层
            Travel_VecLayer = new Zondy.Map.Layer(name11, gdbps11, {
                name: "旅游景点",
                //访问IGServer的IP
                ip: "127.0.0.1",
                //访问IGServer的端口号，.net版为6163，Java版为8089
                port: "6163",
                //过滤条件
                filters: "2:GISLINKID=1742"
            });
        map.addLayer(Travel_VecLayer);
        var name12 = "汽车服务";
        //要显示的图层的gdbps地址
        var gdbps12 = ["gdbp://MapGisLocal/平台基础示例数据/ds/武汉市区/sfcls/汽车服务"],
            //创建一个图层
            Car_VecLayer = new Zondy.Map.Layer(name12, gdbps12, {
                name: "汽车服务",
                //访问IGServer的IP
                ip: "127.0.0.1",
                //访问IGServer的端口号，.net版为6163，Java版为8089
                port: "6163",
                //过滤条件
                filters: "2:GISLINKID=1742"
            });
        map.addLayer(Car_VecLayer);
        var name13 = "商业网点";
        //要显示的图层的gdbps地址
        var gdbps13 = ["gdbp://MapGisLocal/平台基础示例数据/ds/武汉市区/sfcls/商业网点"],
            //创建一个图层
            Commerce_VecLayer = new Zondy.Map.Layer(name13, gdbps13, {
                name: "商业网点",
                //访问IGServer的IP
                ip: "127.0.0.1",
                //访问IGServer的端口号，.net版为6163，Java版为8089
                port: "6163",
                //过滤条件
                filters: "2:GISLINKID=1742"
            });
        map.addLayer(Commerce_VecLayer);
        var name14 = "文化教育";
        //要显示的图层的gdbps地址
        var gdbps14 = ["gdbp://MapGisLocal/平台基础示例数据/ds/武汉市区/sfcls/文化教育"],
            //创建一个图层
            Education_VecLayer = new Zondy.Map.Layer(name14, gdbps14, {
                name: "文化教育",
                //访问IGServer的IP
                ip: "127.0.0.1",
                //访问IGServer的端口号，.net版为6163，Java版为8089
                port: "6163",
                //过滤条件
                filters: "2:GISLINKID=1742"
            });
        map.addLayer(Education_VecLayer);
        var name15 = "新闻媒体";
        //要显示的图层的gdbps地址
        var gdbps15 = ["gdbp://MapGisLocal/平台基础示例数据/ds/武汉市区/sfcls/新闻媒体"],
            //创建一个图层
            New_VecLayer = new Zondy.Map.Layer(name15, gdbps15, {
                name: "新闻媒体",
                //访问IGServer的IP
                ip: "127.0.0.1",
                //访问IGServer的端口号，.net版为6163，Java版为8089
                port: "6163",
                //过滤条件
                filters: "2:GISLINKID=1742"
            });
        map.addLayer(New_VecLayer);
        var name16 = "医疗卫生";
        //要显示的图层的gdbps地址
        var gdbps16 = ["gdbp://MapGisLocal/平台基础示例数据/ds/武汉市区/sfcls/医疗卫生"],
            //创建一个图层
            Hospital_VecLayer = new Zondy.Map.Layer(name16, gdbps16, {
                name: "医疗卫生",
                //访问IGServer的IP
                ip: "127.0.0.1",
                //访问IGServer的端口号，.net版为6163，Java版为8089
                port: "6163",
                //过滤条件
                filters: "2:GISLINKID=1742"
            });
        map.addLayer(Hospital_VecLayer);
        var name17 = "邮电通讯";
        //要显示的图层的gdbps地址
        var gdbps17 = ["gdbp://MapGisLocal/平台基础示例数据/ds/武汉市区/sfcls/邮电通讯"],
            //创建一个图层
            Post_VecLayer = new Zondy.Map.Layer(name17, gdbps17, {
                name: "邮电通讯",
                //访问IGServer的IP
                ip: "127.0.0.1",
                //访问IGServer的端口号，.net版为6163，Java版为8089
                port: "6163",
                //过滤条件
                filters: "2:GISLINKID=1742"
            });
        map.addLayer(Post_VecLayer);
        var name18 = "政府机关";
        //要显示的图层的gdbps地址
        var gdbps18 = ["gdbp://MapGisLocal/平台基础示例数据/ds/武汉市区/sfcls/政府机关"],
            //创建一个图层
            Leader_VecLayer = new Zondy.Map.Layer(name18, gdbps18, {
                name: "政府机关",
                //访问IGServer的IP
                ip: "127.0.0.1",
                //访问IGServer的端口号，.net版为6163，Java版为8089
                port: "6163",
                //过滤条件
                filters: "2:GISLINKID=1742"
            });
        map.addLayer(Leader_VecLayer);

        //实例化ZoomSlider控件并加载到地图容器中
        var zoomslider = new ol.control.ZoomSlider();
        map.addControl(zoomslider);
        //实例化zoomToExtent控件并加载到地图容器中
        var zoomToExtent = new ol.control.ZoomToExtent({
            extent: [
                813079.7791264898, 5929220.284081122,
                848966.9639063801, 5936863.986909639
            ]
        });
        map.addControl(zoomToExtent);
        //加载图层列表数据
        loadLayersControl(map, "layerTree");
        //地图视图的初始参数
        var view = map.getView();
        var zoom = view.getZoom();
        var center = view.getCenter();
        var rotation = view.getRotation();
        //单击缩小按钮功能
        document.getElementById('zoom-out').onclick = function () {
            //获取地图视图
            var view = map.getView();
            //获得当前缩放级数
            var zoom = view.getZoom();
            //地图缩小一级
            view.setZoom(zoom - 1);
        };
        //单击放大按钮功能
        document.getElementById('zoom-in').onclick = function () {
            //获取地图视图
            var view = map.getView();
            //获得当前缩放级数
            var zoom = view.getZoom();
            view.setZoom(zoom + 1);
            //地图放大一级
        };
        view.setZoom(zoom + 1);
        //平移功能（移到到武汉市）
        document.getElementById('panto').onclick = function () {
            //获取地图视图
            var view = map.getView();
            //平移地图
            view.setCenter(center);
            view.setZoom(5);
        };
        //复位功能（复位到初始状态）
        document.getElementById('restore').onclick = function () {
            //初始中心点
            view.setCenter(center);
            //初始旋转角度
            view.setRotation(rotation);
            //初始缩放级数
            view.setZoom(zoom);
        };

        function fun_select() {
            var selected_fun = document.getElementById("function_input");
            var funContent = document.getElementById("menuTree");
            if (selected_fun.value == "option0") {
                selectWUHAN = 0;
            }
            if (selected_fun.value == "option1") {
                selectWUHAN = 1;
            }
            if (selected_fun.value == "option2") {
                selectWUHAN = 2;
            }
            if (selected_fun.value == "option3") {
                selectWUHAN = 3;
            }
            if (selected_fun.value == "option4") {
                selectWUHAN = 4;
            }
            if (selected_fun.value == "option5") {
                selectWUHAN = 5;
            }
            if (selected_fun.value == "option6") {
                selectWUHAN = 6;
            }
            if (selected_fun.value == "option7") {
                selectWUHAN = 7;
            }
            if (selected_fun.value == "option8") {
                selectWUHAN = 8;
            }
            if (selected_fun.value == "option9") {
                selectWUHAN = 9;
            }
            if (selected_fun.value == "option10") {
                selectWUHAN = 10;
            }
            if (selected_fun.value == "option11") {
                selectWUHAN = 11;
            }
            if (selected_fun.value == "option12") {
                selectWUHAN = 12;
            }
            if (selected_fun.value == "option13") {
                selectWUHAN = 13;
            }
            if (selected_fun.value == "option14") {
                selectWUHAN = 14;
            }
            if (selected_fun.value == "option15") {
                selectWUHAN = 15;
            }
            if (selected_fun.value == "option16") {
                selectWUHAN = 16;
            }
            if (selected_fun.value == "option17") {
                selectWUHAN = 17;
            }
        }

        function queryVectorLayerByPnt() {
            clearA();
            stopqueryVectorLayerByPnt();
            //实例化一个矢量图层Vector作为绘制层
            var source = new ol.source.Vector({
                wrapX: false,
            });
            var vector = new ol.layer.Vector({
                source: source,
                style: new ol.style.Style({
                    //填充色
                    fill: new ol.style.Fill({
                        color: 'rgba(255, 255, 255, 0.2)'
                    }),
                    //边线样式
                    stroke: new ol.style.Stroke({
                        color: 'blue',
                        width: 1
                    })
                })
            });
            //将绘制层添加到地图容器中
            map.addLayer(vector);
            var maxPoints = 2;
            geometryFunction = function (coordinates, geometry) {
                if (!geometry) {
                    //多边形
                    geometry = new ol.geom.Polygon(null);
                }
                var start = coordinates[0];
                var end = coordinates[1];
                geometry.setCoordinates([
                    [start, [start[0], end[1]], end, [end[0], start[1]], start]
                ]);
                return geometry;
            };
            //实例化交互绘制类对象并添加到地图容器中
            draw = new ol.interaction.Draw({
                type: 'LineString',
                //绘制层数据源
                source: source,
                geometryFunction: geometryFunction,
                //最大点数
                maxPoints: maxPoints
            });
            map.addInteraction(draw);

            //点击查询的回调函数
            draw.on('drawend', drawControlback);
        }

        function drawControlback(features) {
            clearA();
            //初始化查询结构对象，设置查询结构包含几何信息
            var queryStruct = new Zondy.Service.QueryFeatureStruct();
            //是否包含几何图形信息
            queryStruct.IncludeGeometry = true;
            //是否包含属性信息
            queryStruct.IncludeAttribute = true;
            //是否包含图形显示参数
            queryStruct.IncludeWebGraphic = false;
            //创建一个用于查询的区
            var geomObj = new Zondy.Object.Polygon();
            geomObj.setByOL(features.feature.values_.geometry);
            //指定查询规则
            var rule = new Zondy.Service.QueryFeatureRule({
                //是否将要素的可见性计算在内
                EnableDisplayCondition: false,
                //是否完全包含
                MustInside: false,
                //是否仅比较要素的外包矩形
                CompareRectOnly: false,
                //是否相交
                Intersect: true
            });
            //实例化查询参数对象
            var queryParam = new Zondy.Service.QueryParameter({
                geometry: geomObj,
                resultFormat: "json",
                struct: queryStruct,
                rule: rule
            });
            //设置查询分页号
            queryParam.pageIndex = 0;
            //设置查询要素数目
            queryParam.recordNumber = 30;
            //实例化地图文档查询服务对象
            var queryService = new Zondy.Service.QueryDocFeature(queryParam, "WUHAN", selectWUHAN, {
                //访问IGServer的IP
                ip: "127.0.0.1",
                //访问IGServer的端口号，.net版为6163，Java版为8089
                port: "6163"
            });
            //执行查询操作，querySuccess为查询回调函数
            queryService.query(querySuccess, queryError);
        }
        //查询失败回调
        function queryError(e) {
            alert("查询失败");
        }

        //查询成功回调
        function querySuccess(result) {
            if (result && result.TotalCount > 0) {
                //初始化Zondy.Format.PolygonJSON类
                var format = new Zondy.Format.PolygonJSON();
                //将MapGIS要素JSON反序列化为ol.Feature类型数组
                var features = format.read(result);

                //实例化一个矢量图层Vector作为绘制层
                var drawSource = new ol.source.Vector({
                    //是否在地图水平坐标轴上重复
                    wrapX: false
                });
                drawSource.addFeatures(features);
                var drawLayer = new ol.layer.Vector({
                    source: drawSource,
                    style: new ol.style.Style({
                        //填充色
                        fill: new ol.style.Fill({
                            color: 'rgba(255, 204, 51, 0.5)'
                        }),
                        //边线颜色
                        stroke: new ol.style.Stroke({
                            color: 'rgba(255,204, 51, 1)',
                            width: 1
                        })
                    })
                });

                map.addLayer(drawLayer);
                queryResult(result, drawLayer);
            } else {
                alert("没有数据");
            }
        }

        function stopqueryVectorLayerByPnt() {
            if (draw != null)
                //移除交互绘制控件
                map.removeInteraction(draw);
        }

        //清除客户端查询结果信息
        function clearA() {
            if (map.getLayers().array_.length > 1) {
                for (var i = map.getLayers().array_.length - 1; i > 0; i--) {
                    map.removeLayer(map.getLayers().array_[i]);
                }
            }
            else
                return;
        }
        function queryVectorLayerByPnt_Point() {
            clearA();
            stopqueryVectorLayerByPnt();
            //实例化一个矢量图层Vector作为绘制层
            var source = new ol.source.Vector({ wrapX: false });
            var vector = new ol.layer.Vector({
                source: source,
                style: new ol.style.Style({
                    //形状
                    image: new ol.style.Circle({
                        radius: 0
                    })
                })
            });
            //将绘制层添加到地图容器中
            map.addLayer(vector);

            //实例化交互绘制类对象并添加到地图容器中
            draw = new ol.interaction.Draw({
                type: 'Point',
                //绘制层数据源
                source: source
            });
            map.addInteraction(draw);
            //点击查询的回调函数
            draw.on('drawend', drawControlback_Point);
        }

        function drawControlback_Point(feature) {
            clearA();
            //初始化查询结构对象，设置查询结构包含几何信息
            var queryStruct = new Zondy.Service.QueryFeatureStruct();
            //是否包含几何图形信息
            queryStruct.IncludeGeometry = true;
            //是否包含属性信息
            queryStruct.IncludeAttribute = true;
            //是否包含图形显示参数
            queryStruct.IncludeWebGraphic = false;
            //创建一个用于查询的点
            var geomObj = new Zondy.Object.PointForQuery();
            geomObj.setByOL(feature.feature.values_.geometry);
            //设置查询点的搜索半径
            geomObj.nearDis = 0.1;
            //指定查询规则
            var rule = new Zondy.Service.QueryFeatureRule({
                //是否将要素的可见性计算在内
                EnableDisplayCondition: false,
                //是否完全包含
                MustInside: false,
                //是否仅比较要素的外包矩形
                CompareRectOnly: false,
                //是否相交
                Intersect: true
            });
            //实例化查询参数对象
            var queryParam = new Zondy.Service.QueryParameter({
                geometry: geomObj,
                resultFormat: "json",
                struct: queryStruct,
                rule: rule
            });
            //设置查询分页号
            queryParam.pageIndex = 0;
            //设置查询要素数目
            queryParam.recordNumber = 30;
            //实例化地图文档查询服务对象
            var queryService = new Zondy.Service.QueryDocFeature(queryParam, "WUHAN", 1, {
                //访问IGServer的IP
                ip: "127.0.0.1",
                //访问IGServer的端口号，.net版为6163，Java版为8089
                port: "6163"
            });
            //执行查询操作，querySuccess为查询回调函数
            queryService.query(querySuccess, queryError);
        }

        //将查询返回的json对象在表格中显示
        function queryResult(a, m_layer) {
            if (a == null || a.SFEleArray == null || a.SFEleArray.length <= 0) { return; }
            if (m_layer == null) { return; }
            var strjson = new Array(a.SFEleArray.length)
            for (i = 0; i < a.SFEleArray.length; i++) {
                strjson[i] = {};
                for (k = 0; k <= a.AttStruct.FldName.length; k++) {
                    if (k == 0) {
                        strjson[i]["FID"] = a.SFEleArray[i].FID;
                    }
                    else {
                        strjson[i][a.AttStruct.FldName[k - 1]] = a.SFEleArray[i].AttValue[k - 1];
                    }
                }
            }

            //格式化后的JSON数据
            CustomersData = {
                Rows: strjson,
                Total: a.SFEleArray.length
            };
            //设置要在表格显示的数据对象
            var filedStr = new Array(a.AttStruct.FldName.length - 1);
            for (var k = 0; k <= a.AttStruct.FldName.length; k++) {
                filedStr[k] = {};
            }

            for (var m = 0; m <= a.AttStruct.FldName.length; m++) {
                if (m == 0) {
                    filedStr[m]["display"] = "FID";
                    filedStr[m]["name"] = "FID";
                }
                else {
                    filedStr[m]["display"] = a.AttStruct.FldName[m - 1];
                    filedStr[m]["name"] = a.AttStruct.FldName[m - 1];
                    filedStr[m]["editor"] = "text";
                }
                filedStr[m]["align"] = "center";
                filedStr[m]["width"] = 80;
            }

            //初始化查询结果表格控件
            grid = $("#tab").ligerGrid({
                columns: filedStr,//列
                data: CustomersData,//表格数据
                sortName: a.AttStructFldName,//列名
                width: "45%",
                height: '448px',
                pageSize: 15,//每页默认的结果数
                pageSizeOptions: [15, 20, 25, 30],//可选择设定的每页结果数
                //表格选中行事件
                onSelectRow: function (data, rowobj, rowindex) {
                    var fid = data.FID.valueOfO;//获取当前选中行要素的FID
                    queryByID(fid);//通过要素FID查询该要素的几何信息并闪烁
                }
            });
            //将查询结果记录装载到表格中显示
            if (1) {
                gridManager = $("#tab").ligerGetGridManager();
                gridManager.setOptions({ columns: filedStr });
                gridManager.setOptions({ data: CustomersData });
                gridManager.loadData();
                return;
            }
        }
        //通过要素FID查询该要素的几何信息
        function queryByID(id) {
            var queryStruct = new Zondy.Service.QueryFeatureStruct();
            queryStruct.IncludeGeometry = true;
            var queryParam = new Zondy.Service.QueryParameter({ objectIds: id, struct: queryStruct });
            var queryService = new Zondy.Service.QueryDocFeature(queryParam, "WUHAN", 1);
            queryService.query(flashOneFeatrue);//查询成功后的回调函数
        }
        var source1,vector1,draw1;
function measure0(){
           //加载测量的绘制矢量层
            source1 = new ol.source.Vector(); //图层数据源
            vector1 = new ol.layer.Vector({
            source: source1,
            style: new ol.style.Style({ //图层样式
                fill: new ol.style.Fill({
                    color: 'rgba(255, 255, 255, 0.2)' //填充颜色
                }),
                stroke: new ol.style.Stroke({
                    color: '#ffcc33',  //边框颜色
                    width: 2   // 边框宽度
                }),
                image: new ol.style.Circle({
                    radius: 7,
                    fill: new ol.style.Fill({
                        color: '#ffcc33'
                    })
                })
            })
        });
        map.addLayer(vector1);

        var wgs84Sphere = new ol.Sphere(6378137); //定义一个球对象
        /**
         * 当前绘制的要素（Currently drawn feature.）
         * @type {ol.Feature}
         */
        var sketch;
        /**
         * 帮助提示框对象（The help tooltip element.）
         * @type {Element}
         */
        var helpTooltipElement;
        /**
         *帮助提示框显示的信息（Overlay to show the help messages.）
         * @type {ol.Overlay}
         */
        var helpTooltip;
        /**
         * 测量工具提示框对象（The measure tooltip element. ）
         * @type {Element}
         */
        var measureTooltipElement;
        /**
         *测量工具中显示的测量值（Overlay to show the measurement.）
         * @type {ol.Overlay}
         */
        var measureTooltip;
        /**
         *  当用户正在绘制多边形时的提示信息文本
         * @type {string}
         */
        var continuePolygonMsg = 'Click to continue drawing the polygon';
        /**
         * 当用户正在绘制线时的提示信息文本
         * @type {string}
         */
        var continueLineMsg = 'Click to continue drawing the line';

        /**
         * 鼠标移动事件处理函数
         * @param {ol.MapBrowserEvent} evt
         */
        var pointerMoveHandler = function (evt) {
            if (evt.dragging) {
                return;
            }
            /** @type {string} */
            var helpMsg = 'Click to start drawing';//当前默认提示信息
            //判断绘制几何类型设置相应的帮助提示信息
            if (sketch) {
                var geom = (sketch.getGeometry());
                if (geom instanceof ol.geom.Polygon) {
                    helpMsg = continuePolygonMsg; //绘制多边形时提示相应内容
                } else if (geom instanceof ol.geom.LineString) {
                    helpMsg = continueLineMsg; //绘制线时提示相应内容
                }
            }
            helpTooltipElement.innerHTML = helpMsg; //将提示信息设置到对话框中显示
            helpTooltip.setPosition(evt.coordinate);//设置帮助提示框的位置
            $(helpTooltipElement).removeClass('hidden');//移除帮助提示框的隐藏样式进行显示
        };
        map.on('pointermove', pointerMoveHandler); //地图容器绑定鼠标移动事件，动态显示帮助提示框内容
        //地图绑定鼠标移出事件，鼠标移出时为帮助提示框设置隐藏样式
        $(map.getViewport()).on('mouseout', function () {
            $(helpTooltipElement).addClass('hidden');
        });

        var geodesicCheckbox = document.getElementById('geodesic');//测地学方式对象
        var typeSelect = document.getElementById('type');//测量类型对象
        /**
        * 加载交互绘制控件函数
        */
        function addInteraction() {
            var type = (typeSelect.value == 'area' ? 'Polygon' : 'LineString');
            draw1 = new ol.interaction.Draw({
                source: source1,//测量绘制层数据源
                type: /** @type {ol.geom.GeometryType} */ (type),  //几何图形类型
                style: new ol.style.Style({//绘制几何图形的样式
                    fill: new ol.style.Fill({
                        color: 'rgba(255, 255, 255, 0.2)'
                    }),
                    stroke: new ol.style.Stroke({
                        color: 'rgba(0, 0, 0, 0.5)',
                        lineDash: [10, 10],
                        width: 2
                    }),
                    image: new ol.style.Circle({
                        radius: 5,
                        stroke: new ol.style.Stroke({
                            color: 'rgba(0, 0, 0, 0.7)'
                        }),
                        fill: new ol.style.Fill({
                            color: 'rgba(255, 255, 255, 0.2)'
                        })
                    })
                })
            });
            map.addInteraction(draw1);

            createMeasureTooltip(); //创建测量工具提示框
            createHelpTooltip(); //创建帮助提示框

            var listener;
            //绑定交互绘制工具开始绘制的事件
            draw1.on('drawstart',
              function (evt) {
                  // set sketch
                  sketch = evt.feature; //绘制的要素

                  /** @type {ol.Coordinate|undefined} */
                  var tooltipCoord = evt.coordinate;// 绘制的坐标
                  //绑定change事件，根据绘制几何类型得到测量长度值或面积值，并将其设置到测量工具提示框中显示
                  listener = sketch.getGeometry().on('change', function (evt) {
                      var geom = evt.target;//绘制几何要素
                      var output;
                      if (geom instanceof ol.geom.Polygon) {
                          output = formatArea(/** @type {ol.geom.Polygon} */(geom));//面积值
                          tooltipCoord = geom.getInteriorPoint().getCoordinates();//坐标
                      } else if (geom instanceof ol.geom.LineString) {
                          output = formatLength( /** @type {ol.geom.LineString} */(geom));//长度值
                          tooltipCoord = geom.getLastCoordinate();//坐标
                      }
                      measureTooltipElement.innerHTML = output;//将测量值设置到测量工具提示框中显示
                      measureTooltip.setPosition(tooltipCoord);//设置测量工具提示框的显示位置
                  });
              }, this);
            //绑定交互绘制工具结束绘制的事件
            draw1.on('drawend',
                function (evt) {
                    measureTooltipElement.className = 'tooltip tooltip-static'; //设置测量提示框的样式
                    measureTooltip.setOffset([0, -7]);
                    // unset sketch
                    sketch = null; //置空当前绘制的要素对象
                    // unset tooltip so that a new one can be created
                    measureTooltipElement = null; //置空测量工具提示框对象
                    createMeasureTooltip();//重新创建一个测试工具提示框显示结果
                    ol.Observable.unByKey(listener);
                }, this);
        }


        /**
        *创建一个新的帮助提示框（tooltip）
        */
        function createHelpTooltip() {
            if (helpTooltipElement) {
                helpTooltipElement.parentNode.removeChild(helpTooltipElement);
            }
            helpTooltipElement = document.createElement('div');
            helpTooltipElement.className = 'tooltip hidden';
            helpTooltip = new ol.Overlay({
                element: helpTooltipElement,
                offset: [15, 0],
                positioning: 'center-left'
            });
            map.addOverlay(helpTooltip);
        }
        /**
        *创建一个新的测量工具提示框（tooltip）
        */
        function createMeasureTooltip() {
            if (measureTooltipElement) {
                measureTooltipElement.parentNode.removeChild(measureTooltipElement);
            }
            measureTooltipElement = document.createElement('div');
            measureTooltipElement.className = 'tooltip tooltip-measure';
            measureTooltip = new ol.Overlay({
                element: measureTooltipElement,
                offset: [0, -15],
                positioning: 'bottom-center'
            });
            map.addOverlay(measureTooltip);
        }

        /**
        * 让用户切换选择测量类型（长度/面积）
        * @param {Event} e Change event.
        */
        typeSelect.onchange = function (e) {
            map.removeInteraction(draw1); //移除绘制图形
            addInteraction();//添加绘图进行测量
        };

        /**
        * 测量长度输出
        * @param {ol.geom.LineString} line
        * @return {string}
        */
        var formatLength = function (line) {
            var length;
            if (geodesicCheckbox.checked) { //若使用测地学方法测量
                var coordinates = line.getCoordinates();//解析线的坐标
                length = 0;
                var sourceProj = map.getView().getProjection(); //地图数据源投影坐标系
                //通过遍历坐标计算两点之前距离，进而得到整条线的长度
                for (var i = 0, ii = coordinates.length - 1; i < ii; ++i) {
                    var c1 = ol.proj.transform(coordinates[i], sourceProj, 'EPSG:4326');
                    var c2 = ol.proj.transform(coordinates[i + 1], sourceProj, 'EPSG:4326');
                    length += wgs84Sphere.haversineDistance(c1, c2);
                }
            } else {
                length = Math.round(line.getLength() * 100) / 100; //直接得到线的长度
            }
            var output;
            if (length > 100) {
                output = (Math.round(length / 1000 * 100) / 100) + ' ' + 'km'; //换算成KM单位
            } else {
                output = (Math.round(length * 100) / 100) + ' ' + 'm'; //m为单位
            }
            return output;//返回线的长度
        };
        /**
        * 测量面积输出
        * @param {ol.geom.Polygon} polygon
        * @return {string}
        */
        var formatArea = function (polygon) {
            var area;
            if (geodesicCheckbox.checked) {//若使用测地学方法测量
                var sourceProj = map.getView().getProjection();//地图数据源投影坐标系
                var geom = /** @type {ol.geom.Polygon} */(polygon.clone().transform(sourceProj, 'EPSG:4326')); //将多边形要素坐标系投影为EPSG:4326
                var coordinates = geom.getLinearRing(0).getCoordinates();//解析多边形的坐标值
                area = Math.abs(wgs84Sphere.geodesicArea(coordinates)); //获取面积
            } else {
                area = polygon.getArea();//直接获取多边形的面积
            }
            var output;
            if (area > 10000) {
                output = (Math.round(area / 1000000 * 100) / 100) + ' ' + 'km<sup>2</sup>'; //换算成KM单位
            } else {
                output = (Math.round(area * 100) / 100) + ' ' + 'm<sup>2</sup>';//m为单位
            }
            return output; //返回多边形的面积
        };

        addInteraction(); //调用加载绘制交互控件方法，添加绘图进行测量
    }
    function NOmeasure0(){
        map.removeInteraction(vector1); //移除绘制图形
        map.removeInteraction(draw1); //移除绘制图形
    }
    </script>
</body>

</html>